<template>
  <div>
    <el-table
        ref="multipleTable"
        cell-class-name="cellStyle"
        header-cell-class-name="headerStyle"
        class="table"
        :data="tableData"
        tooltip-effect="dark"
        style="width:unset;float: left;margin-top: .5vw;"
        :header-cell-style="{
      background:'#409eff',color:'#fff'
      }"
        stripe border
    >
      <el-table-column type="selection" width="90px" align="center" label-class-name="DisabledSelection"></el-table-column>
      <el-table-column
          prop="id"
          label='序号'
          width="120"
          header-align="center"
          align="center"
      >
        <!--      <template scope="scope">-->
        <!--        <span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span>-->
        <!--      </template>-->
      </el-table-column>
      <el-table-column
          label="预约ID"
          width="120"
          header-align="center"
          align="center"
      >
        <template slot-scope="scope">
          <el-link :href="'#/maintainclients?id=' + scope.row.booking.bookingNo " :underline="false" style="color: blue;text-decoration: none;">{{scope.row.booking.bookingNo}}</el-link>
        </template>
      </el-table-column>
      <el-table-column
          prop="booking.name"
          label="姓名"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="booking.phoneNum"
          label="手机号"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="booking.openid"
          label="客户openid"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="booking.password"
          label="保单号"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="booking.idno"
          label="身份证号"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <template v-if="tableData[0].record">
        <template v-for="(val,index) in tableData[0].record" >
          <el-table-column
              :label="'补充信息'+[index+1]"
              width="120"
              :key="index"
              header-align="center"
              align="center">
            <el-table-column
                label="预约时间"
                width='120'
                header-align="center"
                align="center">
              <template slot-scope="scope">
                {{scope.row.record[index].appointment.substring(0,10)}}
              </template>
            </el-table-column>
            <el-table-column
                label="预约事项"
                width='120'
                header-align="center"
                align="center">
              <template slot-scope="scope">
                {{scope.row.record[index].matter}}
              </template>
            </el-table-column>
            <el-table-column
                label="备注"
                width='120'
                header-align="center"
                align="center">
              <template slot-scope="scope">
                {{scope.row.record[index].remark}}
              </template>
            </el-table-column>
          </el-table-column>
        </template>
      </template>
      <el-table-column
          prop="createDate"
          label="首次预约时间"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="modifiedDate"
          label="最新预约时间"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="booking.authorize"
          label="是否勾选隐私协议"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="authorizationDate"
          label="最新勾选隐私协议时间"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="cancellationDate"
          label="最新取消隐私协议时间"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="booking.source"
          label="客户来源"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="booking.channel"
          label="归属渠道"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="booking.companyCode"
          label="登记主体"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="agent.username"
          label="内勤登录账号"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="agent.agentNo"
          label="代理人工号"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="agent.agentName"
          label="代理人姓名"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="agent.agentPhone"
          label="代理人手机号"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="agent.agentCompanyName"
          label="代理人归属分公司"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
      <el-table-column
          prop="agent.agentBrchName"
          label="代理人归属支公司"
          width="120"
          header-align="center"
          align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  created() {
    this.demo(this.tableData);
    this.demo2(this.tableData)
  },
  methods: {
    //函数1
    demo(arr){
      let newArr = []
      for (let i = 0; i <=arr.length-1 ; i++) {
        let obj = {}
        let obj1 = {}
        console.log(arr[i],"看看数组每一项")
        for (let j = 0; j <=arr[i].record.length-1 ; j++) {
          console.log(arr[i].record[j],"看看record数组的每一项")
          for (const key in arr[i].record[j]) {
            let obj3 = {}
            console.log('键名',key)
            console.log('键值',arr[i].record[j][key])
            obj3['ext'+(j+1)+'_'+key] = arr[i].record[j][key]
            obj1 = {...obj1,...obj3}
          }
        }
        obj = {...arr[i].agent,...arr[i].booking,...arr[i].id,...obj1}
        console.log(obj,"看看最新的对象")
        newArr.push(obj)
        console.log(newArr)
      }
    },

    //函数2
    demo2(arr){
      let newArr = [];
      for (let i = 0; i <= arr.length-1 ; i++) {
        newArr.push(arr[i].record.length)
        console.log(newArr)
      }

      let maxValue = newArr[0];
      let maxIndex = 0;
      for (let i = 0; i <=newArr.length-1 ; i++) {
        if (maxValue<newArr[i]){
          maxValue=newArr[i];
          maxIndex=i;
          console.log(maxValue,maxIndex)
        }
      }

      for (let i = 0; i <=arr[maxIndex].record-1 ; i++) {
        let obj = {
          label:"",
          child:[
            {label: "预约时间",prop:""},
            {label: "预约事项",prop:""},
            {label: "备注",prop:""}
          ]
        }
        obj.label = "补充信息" +(i+1);
        obj.child[0].prop = arr[maxIndex].record[i]['ext'+(i+1)+'_'+appointment]
      }


    }
  },
  data(){
    return {
      tableData:[
        {
          agaent:{
            agentBrchName: "北京",
            agentCompanyName: "北京",
            agentName: "申晋",
            agentNo: "10000963",
            agentPhone: "17335805507",
            username: "admin"
          },
          id:2,
          booking: {
            agentId: "10000963",
            authorizationDate: 1670310991000,
            authorize: "Y",
            bookingNo: "KYY0364",
            brchCode: "10",
            cancellationDate: 1670310991000,
            channel: "AG",
            comCode: null,
            companyCode: "1",
            createDate: 1670236443000,
            id: 364,
            idno: "",
            modifiedDate: 1670310991000,
            name: "新增复测1111222",
            openid: "",
            password: "",
            phoneNum: "18899996666",
            source: "导入"
          },
          record:[
            {
              appointment: "2022-12-05",
              bookingNo: "KYY0364",
              id: 206,
              matter: "咨询",
              remark: "补充"
            },
            {
              appointment: "2022-12-05",
              bookingNo: "KYY0364",
              id: 207,
              matter: "咨询2",
              remark: "补充2"
            }
          ]
        },
        {
          agaent:{
            agentBrchName: "北京",
            agentCompanyName: "北京",
            agentName: "申晋",
            agentNo: "10000963",
            agentPhone: "17335805507",
            username: "admin"
          },
          id:3,
          booking: {
            agentId: "10000963",
            authorizationDate: 1670310991000,
            authorize: "Y",
            bookingNo: "KYY0365",
            brchCode: "10",
            cancellationDate: 1670310991000,
            channel: "AG",
            comCode: null,
            companyCode: "1",
            createDate: 1670236443000,
            id: 364,
            idno: "",
            modifiedDate: 1670310991000,
            name: "新增复测1111222",
            openid: "",
            password: "",
            phoneNum: "18899994444",
            source: "导入"
          },
          record:[
            {
              appointment: "2022-12-05",
              bookingNo: "KYY0365",
              id: 206,
              matter: "咨询",
              remark: "补充"
            },
            {
              appointment: "2022-12-05",
              bookingNo: "KYY0365",
              id: 207,
              matter: "咨询2",
              remark: "补充2"
            },
            {
              appointment: "2022-12-05",
              bookingNo: "KYY0365",
              id: 207,
              matter: "咨询3",
              remark: "补充3"
            },
            {
              appointment: "2022-12-05",
              bookingNo: "KYY0365",
              id: 207,
              matter: "咨询4",
              remark: "补充4"
            }
          ]
        },
      ],
      //第一个数组
      tableData1:[],
      //第二个数组
      tableData2:[
        {label:"序号",prop:"id"},
        {label:"预约Id",prop:"bookingNo"},
        {label:"姓名",prop:"name"},
        {label:"手机号",prop:"phoneNum"},
        {label:"openid",prop:"openid"},
        {label:"保单号",prop:"password"},
        {label:"身份证号",prop:"idno"},
        {label:"首次预约时间",prop:"createDate"},
        {label:"最新预约时间",prop:"modifiedDate"},
        {label:"是否勾选隐私协议",prop:"authorize"},
        {label:"是否勾选隐私协议时间",prop:"authorizationDate"},
        {label:"最新取消隐私协议时间",prop:"cancellationDate"},
        {label:"客户来源",prop:"source"},
        {label:"归属渠道",prop:"channel"},
        {label:"登记主体",prop:"companyCode"},
        {label:"内勤登陆账号",prop:"username"},
        {label:"代理人工号",prop:"agentNo"},
        {label:"代理人姓名",prop:"agentName"},
        {label:"代理人手机号",prop:"agentPhone"},
        {label:"代理人归属分公司",prop:"agentCompanyName"},
        {label:"代理人归属支公司",prop:"agentBrchName"},
      ]
    }
  }

}
</script>

<style scoped>

</style>
